<template>
	<view class="mainpadding beijingse">
		<view class="sousuobox flexleft" @click="tzsousuo">
			<view class="sousuoicon margin_right2"></view>
			<input class="inputs" type="text" placeholder="请输入你要搜索的内容" :disabled="true">
		</view>
		<!-- 商品 -->
		<view class="shangpinbox">
			<view class="flexbetween margin_top">
				<view :class="current==0?'nofocustext':'focustext'" @click="selectab(0)">综合</view>
				<view class="flexleft">
					<view :class="current==1?'nofocustext ':'focustext'" @click="selectab(1)">销量</view>
					<view class="trbox">
						<view class="shanghjt"></view>
						<view class="xiahjt"></view>
					</view>
				</view>
				<view class="flexleft">
					<view :class="current==2?'nofocustext':'focustext'" @click="selectab(2)">价格</view>
					<view class="trbox">
						<view class="shanghuijt"></view>
						<view class="xiahuijt"></view>
					</view>
				</view>
				<view :class="henghshu==1?'hengzhe':'shuzhe'" @click="xuanze()"></view>
			</view>
			<!-- 横着 -->
			<view class="" v-if="henghshu==1">
				<view class="flexbetween flex_wrap">
					<view class="shangpbox margin_top" v-for="item in 5">
						<view class="shangptp">
							<image src="../../static/image/system/qdhd.png" mode=""></image>
						</view>
						<view class="mainpadding ffffff baibox">
							<view class="ershil yhxiank">K12口腔益生菌温和不刺...</view>
							<!-- <view class="flexbetween margin_top5">
								<view class="jiagetext">￥65.00</view>
								<view class="goueucheicon"></view>
							</view> -->
							<!--  -->
							<!-- <view class="jiagetext">65.00福利券+633.66现金</view> -->
						</view>
					</view>
				</view>
			</view>
			<!-- 竖着 -->
			<view class="" v-if="henghshu==2">
				<view class="flextops margin_top ffffff radius mainpadding dingwei" v-for="item in 5">
					<view class="shuzslu">
						<image src="../../static/image/system/qdhd.png" mode=""></image>
					</view>
					<view class="" style="width: 62%;">
						<view class="ershil xiankuan">K12口腔益生菌温和不刺口腔益生菌温和不刺口腔益生菌温和不刺</view>
						<view class="flexbetween shujrgwc">
							<view class="jiagetext">￥65.00</view>
							<view class="goueucheicon"></view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				current: 0,
				henghshu: 1,
			}
		},
		methods: {
			xuanze() {
				this.henghshu = this.henghshu == 1 ? 2 : 1
			},
			tzsousuo() {
				uni.navigateTo({
					url: '/pages/homepage/sousuo'
				})
			},
			selectab(i) {
				if (i == this.current) {
					return false
				}
				this.current = i
			},
		}
	}
</script>
<style lang="scss" scoped>
	// 竖着
	.shujrgwc {
		position: absolute;
		bottom: 30rpx;
		width: 57%;
		right: 30rpx;
	}

	.shuzslu {
		width: 206rpx;
		height: 206rpx;
		border-radius: 11rpx;

		image {
			width: 100%;
			height: 100%;
			border-radius: 11rpx;
		}
	}

	//结束
	// 商品列表样式
	.shangpbox {
		width: 48%;
	}

	.jiagetext {
		font-size: 24rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #FAB536;
	}

	.baibox {
		border-radius: 0 0 11rpx 11rpx;
	}

	.yhxiank {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.shangptp {
		width: 338rpx;
		border-radius: 11rpx 11rpx 0 0;
		height: 338rpx;

		image {
			width: 100%;
			height: 100%;
			border-radius: 11rpx 11rpx 0 0;
		}
	}
</style>
<style lang="scss" scoped>
	.shuzhe {
		width: 33rpx;
		height: 33rpx;
		background-size: 100% 100%;
		background-image: url('../../static/image/system/shu.png');
	}

	.hengzhe {
		width: 33rpx;
		height: 33rpx;
		background-size: 100% 100%;
		background-image: url('../../static/image/system/heng.png');
	}

	.trbox {
		margin-left: 10rpx;
	}

	.xiahuijt {
		margin-top: 6rpx;
		width: 13rpx;
		height: 10rpx;
		background-image: url('../../static/image/system/xiahuijt.png');
		background-size: 100% 100%;
	}

	.shanghuijt {
		width: 13rpx;
		height: 10rpx;
		background-image: url('../../static/image/system/shanghuijt.png');
		background-size: 100% 100%;
	}

	.shanghjt {
		width: 13rpx;
		height: 10rpx;
		background-image: url('../../static/image/system/shanghuangjt.png');
		background-size: 100% 100%;
	}

	.xiahjt {
		margin-top: 6rpx;
		width: 13rpx;
		height: 10rpx;
		background-image: url('../../static/image/system/xiahuangjt.png');
		background-size: 100% 100%;
	}

	.focustext {
		font-size: 26rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #666666;
	}

	.nofocustext {
		font-size: 30rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #000000;
	}

	.sousuobox {
		width: 100%;
		background: #F3F3F3;
		padding: 20rpx 40rpx;
		border-radius: 60rpx;
		box-sizing: border-box;
	}
</style>
